/**
 * 步骤：
 * 1. 安装：npm i react-router-dom
 * 2. 导入路由的三个核心组件：Router / Route / Link
 * 3. 使用 Router 组件包裹**整个应用**（重要）
 * 4. 使用 Link 组件作为导航菜单（路由入口）
 * 5. 使用 Route 组件配置路由规则和要展示的组件（路由出口）
 */






import React, { Component } from 'react';

// 导入三个路由配置：基础组件
import { BrowserRouter as Router, Route, Link, Switch, Redirect, withRouter } from 'react-router-dom'

import './index.css'
import Login from './login';



// 首页组件
class Index extends Component {
  render() {
    console.log(this.props)
    return (
      <div>
        首页
      </div>
    );
  }
}

// 关于我们
// 子组件
const AboutChild = (props) => {
  console.log('关于我们的子组件：', props)
  return (
    <div>
      <h4>AboutChild</h4>
    </div>
  )
}

// 高阶组件
const NewCom = withRouter(AboutChild)

const About = (props) => {
  console.log('about;', props)
  return (
    <div>
      <h2>关于我们</h2>
      <hr />
      {/* <AboutChild {...props} /> */}
      <NewCom />
    </div>
  )
}

// 新闻详情
const News = (props) => {
  // console.log(props)
  const { id, name } = props.match.params;
  // ajax
  return (
    <ul>
      <li>新闻ID：{id},{name}</li>
      <li>2</li>
      <li>3</li>
    </ul>
  )
}

// 联系我们：地址二级路由
const Address = () => {

  return (
    <div>
      <h3>黑马程序员顺义校区，马坡</h3>
    </div>
  )
}
// 联系我们
const Contact = () => {

  return (
    <div>
      <h2>联系我们</h2>
      <hr />
      <h3>二级路由</h3>
      <p><Link to="/contact/address">地址</Link></p>
      <Route path="/contact/address" component={Address} />
    </div>
  )
}

// 404组件
const NotFound = () => {
  return (
    <div>
      <h1>迷路了吗？</h1>
      <Link to="/home">回家</Link>
    </div>
  )
}


// 路由配置
const routeConfig = [
  {
    path: '/news/:id/:name',
    component: News
  },
  {
    path: '/about',
    component: About
  }
]

// 封装：鉴权组件（函数组件）/ 自定义Route
// 参数：1. path 2. component
const Auth = ({ path, component: Com }) => {
  // console.log(props)
  return (
    <Route path={path} render={(props) => {
      // console.log('回调', props)
      //判断是否有token =》 显示首页 
      // 没有 =》 跳到首页
      let token = localStorage.getItem('token');
      if (token) return <Com {...props} />;
      alert('请登录！');
      // return props.history.push('/login')
      return <Redirect to="/login" />

    }} />
  )
}



// 根组件
class App extends Component {
  render() {
    return (
      <Router>
        {/* 导航 */}
        <div className="nav">
          <Link to="/home">home</Link>
          <Link to="/news/123/tom">news</Link>
          <Link to="/about">about</Link>
          <Link to="/contact">contact</Link>
        </div>
        {/* 配置路由:一级路由 */}
        {/* 首页 */}
        <Switch>
          {/* 路由重定向 */}
          <Redirect exact from="/" to="/home" />
          {/* 路由：默认是模糊匹配 */}
          <Auth path="/home" component={Index} />
          {/* <Route exact path="/home" component={Index} /> */}
          {/* <Route exact path="/home" render={(props) => {
            // console.log('回调', props)
            //判断是否有token =》 显示首页 
            // 没有 =》 跳到首页
            let token = 0;
            if (token) return <Index {...props} />;
            alert('请登录！');
            return props.history.push('/login')

          }} /> */}
          {/* 动态路由:新闻详情 */}
          {/* <Route path="/news/:id/:name" component={News} />
          <Route path="/about" component={About} /> */}
          {
            routeConfig.map((item, index) => <Route key={index} path={item.path} component={item.component} />)
          }
          {/* <Route path="/contact" component={Contact} /> */}
          <Auth path="/contact" component={Contact} />
          {/* 登录 */}
          <Route path="/login" component={Login} />
          {/* 404页面 / break;*/}
          <Route component={NotFound} />
        </Switch>
      </Router>
    );
  }
}

export default App;